<template>
  <el-drawer v-model="visibleDrawer" :destroy-on-close="true" :with-header="false" size="50%">
    <el-form>
      <!-- 课程名称 -->
      <el-form-item label="课程名称:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formCourse.courseName" placeholder="请输入课程名称"></el-input>
      </el-form-item>

      <!-- 教师名称 -->
      <el-form-item label="教师名称:" style="width:50%;">
        <el-select lable="" v-model="formCourse.teacherId" placeholder="请选择教师名称" @change="handleTeacherChange">
          <el-option v-for="item in teacherSelectList" :key="item.teacherId" :label="item.nickName"
            :value="item.teacherId" />
        </el-select>
      </el-form-item>

      <!-- 视频数量 -->
      <el-form-item v-show="courseId" label="视频数量:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formCourse.videoNum" placeholder="请输入课程名称"
          :readonly="true"></el-input>
      </el-form-item>
      <!-- 提交按钮 -->
      <el-form-item>
        <el-button class="course-button" type="primary" plain @click="onSubmit()">保存</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ref, reactive, inject } from 'vue';
import { addCourseService, editCourseService, getCourseDetailService } from '@/apis/course'
import { ElMessage } from 'element-plus'

const visibleDrawer = ref(false)
const formCourse = reactive({
  courseId: '',
  courseName: '',
  teacherId: '',
  teacherName: '',
  videoNum: 0,
})
const handleTeacherChange = (teacherId) => {
  const selectedTeacher = teacherSelectList.value.find(
    item => item.teacherId === teacherId
  );
  formCourse.teacherName = selectedTeacher.nickName;
};

const teacherSelectList = inject('teacherList', []);
const classroomId = inject('classroomId', '');

async function open(courseId) {
  visibleDrawer.value = true
  for (const key in formCourse) {
    if (formCourse.hasOwnProperty(key)) {
      formCourse[key] = '';
    }
  }
  if (courseId) {
    const courseDetail = await getCourseDetailService(courseId)
    Object.assign(formCourse, courseDetail.data)
  }
}

defineExpose({
  open
})

function validate() {
  let msg = ''
  return msg
}

const emit = defineEmits(['success'])
async function onSubmit() {
  const errorMessage = '';
  // const errorMessage = validate()
  if (errorMessage) {
    ElMessage.error(errorMessage);
    return false
  }
  const fd = new FormData()
  for (let key in formCourse) {
    fd.append(key, formCourse[key])
  }
  
  // 只有当classroomId有有效值时才添加到请求中
  if (classroomId.value && classroomId.value !== 'undefined') {
    fd.append('classroomId', classroomId.value)
  }
  
  console.log(formCourse)
  if (formCourse.courseId) {
    //编辑题目请求
    await editCourseService(fd)
    ElMessage.success('编辑成功')
    emit('success', 'edit')
  } else {
    await addCourseService(fd)
    ElMessage.success('添加成功')
    emit('success', 'add')
  }
  visibleDrawer.value = false
}


</script>

<style lang="scss">
.course-button {
  width: 200px;
}
</style>